<template>
  <jc-table
    :list="list"
    :options="options"
    :loading = "tableLoading"
    @sizechange="handleSizeChange"
    @currentchange="handleCurrentChange"
    @reload="handleReload"
  ></jc-table>
</template>
<script>
import JcTable from '@/components/JcTable/index.vue'
import { getUserList } from '@/cloudbaseapi/cloudbase-user'
export default {
  name: 'Index',
  components: {
    JcTable
  },
  data() {
    return {
      list: [],
      options: {
        filter: false,
        fields: [
          {
            label: 'UID',
            prop: 'uid'
          },
          {
            label: '昵称',
            prop: 'nickName'
          },
          {
            label: '头像',
            prop: 'avatarUrl',
            type: 'avatar'
          },
          {
            label: '登录方式',
            prop: 'loginType'
          }
        ]
      },
      tableLoading: true,
      limit: 10,
      page: 1
    }
  },
  activated() {
    this.init()
  },
  methods: {
    init() {
      this.handleGetUserList()
    },
    handleGetUserList() {
      this.tableLoading = true
      getUserList(this.limit, this.page).then(res => {
        this.list = res.data
        this.options.total = res.total
        this.tableLoading = false
      })
    },
    handleSizeChange(val) {
      this.limit = val
      this.handleGetUserList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.handleGetUserList()
    },
    handleReload() {
      this.handleGetUserList()
    }
  }
}
</script>

<style scoped>

</style>
